<template>
  <div>
    <ul>
      <li v-for="item in arr" :key="item.id">
        <div class="content2">
          <img :src="require('../../../../assets/img/商品列表 (3).png')" alt="#" />
          <div>
            <p v-html="item.p1"></p>
            <p v-html="item.p2"></p>
            <p>
              <span>￥</span>
              <span>{{item.newPrice}}</span>
              <span>￥{{item.oldPrice}}</span>
              <span>{{item.num}}人已付款</span>
            </p>
            <p>11.11限时{{item.timePrice}}元起</p>
            <p>
              <span>{{item.talk}}条评论</span>
              <span>{{item.goodTalk}}%好评</span>
            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["arr"]
};
</script>

<style scoped>

.content2 {
  width: 7.1rem;
  display: flex;
  justify-content: space-between;
  margin: 0.4rem auto;
}
.content2 img {
  width: 2.16rem;
  height: 2.18rem;
}
.content2 div p {
  margin: 0.11rem 0;
}
.content2 div p:nth-of-type(1) {
  font-size: 0.3rem;
  font-weight: bolder;
}
.content2 div p:nth-of-type(2) {
  font-size: 0.26rem;
  color: gray;
}
.content2 div p:nth-of-type(3) {
  margin: 0.2rem 0 0.1rem;
}
.content2 div p:nth-of-type(3) span:nth-of-type(1) {
  font-size: 0.16rem;
  color: #F76B5D;
}
.content2 div p:nth-of-type(3) span:nth-of-type(2) {
  font-size: 0.3rem;
  color: #F76B5D;
  font-weight: bolder;
}
.content2 div p:nth-of-type(3) span:nth-of-type(3) {
  font-size: 0.16rem;
  text-decoration: line-through;
  color: gray;
}
.content2 div p:nth-of-type(3) span:nth-of-type(4) {
  font-size: 0.16rem;
  color: gray;
  margin-left: 0.2rem;
}
.content2 div p:nth-of-type(4) {
  display: inline-block;
  margin: 0;
  padding: 0.1rem;
  font-size: 0.26rem;
  color: white;
  background-color: #FF8066;
  border-radius: 4px;
}
.content2 div p:nth-of-type(5) span {
  color: gray;
  margin-right: 0.2rem;
}
</style>